<template>
    <div class="action-sheet" :class="{show:actionSheetConfig.isShow}" @click="hideActionSheet">
        <ul class="options-list" >
            <li v-for="(item,index) in actionSheetConfig.list" :key="index" @click="clickHandler(index)">{{item}}</li>
            <li>取消</li>
        </ul>
    </div>
</template>
<script>
    import {
        mapState,mapActions
    } from "vuex";
    export default {
        name: "ActionSheet",
        computed: {
            ...mapState(["actionSheetConfig"])
        },
        methods: {
            ...mapActions(["hideActionSheet"]),
            clickHandler(index) {
                if (typeof this.actionSheetConfig.successCallBack == "function") {
                    this.actionSheetConfig.successCallBack(index);
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .action-sheet {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 20;
        transform: translateY(100%);
        transition: all 0.3s linear;

        &.show {
            transform: translateY(0);
        }

        .options-list {
            position: absolute;
            bottom: 0;
            background-color: gray;
            width: 100%;

            li {
                @include flexbox(row, center, center);
                height: 35px;
                background-color: #fff;

                &:last-child {
                    margin-top: 4px;
                }
            }
        }
    }
</style>